<template>
<div class='footer'>
  <ul>
    <router-link to="/home" tag="li">
    <i class="fa fa-home"></i>
    <span>首页</span>
  </router-link>
    <router-link to="/find" tag="li">
    <i class="fa fa-compass"></i>
    <span>发现</span></router-link>
    <router-link to="/message" tag="li"> <i class="fa fa-compass"></i>
    <span>消息</span></router-link>
    <router-link to="/mine" tag="li"> <i class="fa fa-compass"></i>
    <span>我的</span></router-link>
  </ul>
</div>
</template>

<script>
export default {
data() {
return {

};
},
computed: {},
watch: {},
methods: {

},
created() {

},
mounted() {

},
beforeCreate() {}, 
beforeMount() {}, 
beforeUpdate() {},
updated() {}, 
beforeDestroy() {}, 
destroyed() {},
activated() {}, 
}
</script>
<style lang='scss' scoped>
.footer{
  width:100%;
  position: fixed;
  left: 0;
  bottom: 0;
  height: 50px;
  background: #eeeeee;
  ul{
    overflow: hidden;
     display: flex;
    li{
      list-style: none;
      width: 25%;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
       color: #665757;
      span{
        font-size: 12px;
        margin-top: 8px;
       
      }
      i{
        font-size: 1.5rem;
         margin-top: 4px;
      }

     &.active{
       background: salmon;
       color: #fff;
     }

    }
  }
}
</style>